<template>
  <el-container>
    <!-- 头部导航 -->
    <el-header class="dashHeader">
      <el-row>
        <el-col :span="5">
          <div class="grid-content bg-purple managerTitle">
            <h1>黄金珠宝后台管理系统</h1>
          </div>
        </el-col>
        <el-col :span="19">
          <el-col :span="21">
            <div class="grid-content bg-purple-light">
              <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#20222b"
                text-color="#fff"
                active-text-color="#409EFF"
                router
              >
                <el-menu-item index="/">首页</el-menu-item>
                <el-menu-item index="/goods_manager">商品管理</el-menu-item>
                <el-menu-item index="3">金料管理</el-menu-item>
                <el-menu-item index="4">库存管理</el-menu-item>
                <el-menu-item index="5">进销存管理</el-menu-item>
                <el-menu-item index="6">数据分析</el-menu-item>
                <el-menu-item index="7">客户管理</el-menu-item>
                <el-menu-item index="8">利润核算</el-menu-item>
              </el-menu>
            </div>
          </el-col>
          <el-col :span="3">
            <!-- 退出 -->
            <QuiteView></QuiteView>
          </el-col>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <!-- 侧边导航 -->
      <el-aside width="240px" id="asideMenu">
        <!-- 登录头像 -->
        <div id="headPortrait">
          <div class="photo"></div>
          <div class="info">{{ username }}</div>
        </div>
        <el-menu
          :default-active="asideIndex"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#20222b"
          text-color="#fff"
          active-text-color="#409EFF"
          :style="{ height: asideHeight + 'px' }"
          @select="getIndex"
          router
        >
        <template v-if="asideList">
          <el-menu-item v-for="(c,i) in asideList" :key="i" :index="c.path">
            <i :class="c.meta.icon"></i>
            <span slot="title">{{c.meta.title}}</span>
          </el-menu-item>
        </template>
        <el-menu-item index="/supplier_management">
            <i class="el-icon-setting"></i>
            <span slot="title">供应商基础设置</span>
          </el-menu-item>
          <!-- <el-menu-item index="/goods_set_nav">
            <i class="el-icon-menu"></i>
            <span slot="title">商品基础设置</span>
          </el-menu-item>
          <el-menu-item index="/store">
            <i class="el-icon-menu"></i>
            <span slot="title">门店基础设置</span>
          </el-menu-item> -->
          <!-- <el-menu-item index="/employee_info">
            <i class="el-icon-document"></i>
            <span slot="title">员工基础设置</span>
          </el-menu-item>
          <el-menu-item index="/supplier_management">
            <i class="el-icon-setting"></i>
            <span slot="title">供应商基础设置</span>
          </el-menu-item>
          <el-menu-item index="/rightsManagementHome">
            <i class="el-icon-setting"></i>
            <span slot="title">权限管理</span>
          </el-menu-item>
          <el-menu-item index="/SystemSettings">
            <i class="el-icon-setting"></i>
            <span slot="title">系统设置</span>
          </el-menu-item> -->
        </el-menu>
      </el-aside>
      <el-main>
        <el-card class="box-card">
          <router-view></router-view>
        </el-card>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import QuiteView from "@/components/dash/QuiteView.vue";
export default {
  name: "DashBoard",
  components: {
    QuiteView
  },
  data() {
    return {
      activeIndex: "/",
      asideHeight: null,
      asideIndex: null,
      username: null,
      // userImg: ,
    };
  },
  created() {
    let h = window.innerHeight;
    this.asideHeight = h - 210;
    //获取用户名
    this.username = this.$store.state.userStore.name
    //获取用户头像
    // this.userImg = this.$store.state.userStore.userImg
  },
  methods: {
    
    //头部导航点击事件
    handleSelect(index) {
      this.activeIndex = index;
    },
    handleOpen() {
    },
    handleClose() {},
    //侧边导航点击事件
    getIndex(index) {
      this.asideIndex = index;
    }
  },

  mounted() {
    //监听窗口变化
    window.addEventListener("resize", () => {
      let h = window.innerHeight;
      this.asideHeight = h - 210;
    });
  },
  computed: {
    asideList: function(){
      if(this.$store.state.userStore.initRoutes.length > 0){
        return this.$store.state.userStore.initRoutes[0].children
      }else{
        return null
      }
      
    }
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/scss/var.scss";

.dashHeader {
  background-color: $fu-color5;
  color: $fu-color6;
  .managerTitle {
    height: 60px;
    line-height: 60px;
    h1 {
      font-size: 20px;
      font-weight: bold;
    }
  }
  .el-menu-item {
    padding: 0 30px;
    font-weight: 700;
  }
}

#headPortrait {
  width: 239px;
  height: 150px;
  background-color: $fu-color5;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  .photo {
    width: 100px;
    height: 100px;
    border-radius: 100px;
    background: url('../assets/image/touxiang.jpg') no-repeat center ;
    background-size: 100%;
    .el-avatar{
      width: 100%;
      height: 100%;
    }
  }
  .info {
    color: #fff;
    margin-top: 10px;
  }
}
</style>